body { margin: 0; overflow-x: hidden;}
a { text-decoration: none;}
::-webkit-scrollbar { width: 2px;}
/*Header*/
#header {
  width: 960px;
  height: 60px;
  position: relative;
  margin: 10px auto;
}
#logo {
  width: 60px;
  max-width: 20vw;
  height: 60px;
  position: absolute;
  top: 0;
  left: 20px;
  border-radius: 30px;
}
#logo img { width: 100%;}
#h-nav {
  min-width: 120px;
  max-width: 80vw;
  height: 60px;
  position: absolute;
  top: 0;
  left: 100px;
}
.h-con {
  height: 40px;
  width: 80px;
  float: left;
  margin: 1rem 10px 0 10px;
  color: rgb(128, 128, 128);
  text-align: center;
  font-size: 1.1rem;
  letter-spacing: 4px;
  line-height: 40px;
  cursor: pointer;
  transition: .6s;
}
.h-con:hover {
  color: rgb(37, 190, 228);
  letter-spacing: 7px;
}

/*content*/
.content {
  width: 960px;
  min-height: 480px;
  position: relative;
  margin: 40px auto;
}
#main > div { position: absolute; height: 460px;}
#con-a {
  width: 350px;
  top: 10px;
  left: 0;
}
#con-a div {
  float: left;
  border-radius: 1vw;
  margin:0 10px 10px 0;
  overflow: hidden;
  color: rgb(65, 65, 65);
  background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
  transition: .6s;
}
#con-a div:hover {
  box-shadow: 4px 6px 5px rgb(209, 209, 209);
}
#con-a img {
  width: 100%;
}
.ac-1 {
  width: 110px;
  height: 110px;
}
.ac-1 h3 {
  margin: 1rem 1rem 1rem 1.5rem;
  font-size: 1.6rem;
  letter-spacing: .5rem;
  line-height: 2.4rem;
  text-align: center;
}
.ac-2 {
  width: 220px;
  height: 110px;
  background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
}
.ac-2 h3 {
  margin: .4rem 1rem .4rem 1rem;
  letter-spacing: .3rem;
  font-size: 1.6rem;
}
.ac-2 p {
  margin: .4rem .6rem 1rem 1rem;
  letter-spacing: .1rem;
  font-size: 1rem;
}
.ac-4 {
  width: 220px;
  height: 230px;
}

#con-b {
  width: 460px;
  top: 10px;
  left: 370px;
  background-color: rgba(239, 255, 250, 0.3);
}
.b-card {
  width: 220px;
  height: 110px;
  position: relative;
  float: left;
  margin: 0 10px 10px 0;
  border-radius: 20px;
  background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
  transition: .6s;
}
.b-card h4 {
  margin: .5rem 0 .5rem 1rem;
  font-size: 24px;
}
.b-card p {
  font-size: 14px;
  margin: .5rem 1rem .5rem 1rem;
  text-align: justify;
}
.b-card:hover {
  box-shadow: 4px 6px 5px rgb(209, 209, 209);
}

#con-c {
  width: 100px;
  top: 10px;
  left: 850px;
  overflow-y: scroll;
}
.c-1 {
  width: 60px;
  height: 60px;
  margin-top: 9px;
  margin-left: 24px;
  transition: .6s;
  cursor: pointer;
}
.c-1 img { width: 90%;}

/*easy*/
#easy {
  display: none;
  padding: 1rem 0 1rem 0;
  background-color: rgba(255, 245, 245, 0.6);
}
#easy div {
  width: 90%;
  margin: 10px auto 0 10px;
}
.e-h1, .e-h3 {
  font-size: 1.2rem;
  text-align: center;
  letter-spacing: 4px;
  line-height: 1.4rem;
  color: rgb(78, 78, 78);
}
.e-h1 {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.8rem;
  letter-spacing: 7px;
}
.e-intro {
  border-left: 4px rgb(124, 247, 252) solid;
  padding: .5rem 0 .5rem 1rem;
  color: rgb(167, 234, 255);
  font-weight: 600;
  letter-spacing: 3px;
}
.e-p {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 3px;
  line-height: 1.5rem;
  text-indent: 2.2rem;
  text-align: justify;
  color: rgb(88, 88, 88);
}
.e-img {
  height: auto;
  position: relative;
}
.e-img img { width: 50%; margin-left: 25%;}
.e-img p {
  margin-top: 0;
  text-align: center;
  font-size: .8rem;
  color: rgb(134, 133, 133);
}

/*footer*/
#footer {
  width: 960px;
  height: fit-content;
  position: relative;
  margin: 80px auto 0px auto;
  display: flex;
  background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
.f-con {
  height: fit-content;
  width: 480px;
  flex: 1;
  padding: 1rem;
  text-align: center;
}
@media screen and (max-width: 960px) {
    /*Header*/
    #header {
      width: 100vw;
    }
    .h-con {
      width: 16vw;
      height: 8vw;
      line-height: 8vw;
    }
    /*content*/
    .content { width: 98vw; margin-top: 0;}
    #main {
      height: 180vw;
    }
    #main > div { height: 100vw;}
    #con-a {
      width: 72vw;
      left: 1vw;
    }
    #con-a div {
      margin: 0 3vw 3vw 0;
      border-radius: 3vw;
    }
    .ac-1 {
      width: 22vw;
      height: 22vw;
    }
    .ac-1 h3 {
      margin: 1.6vw 2vw 2vw 4vw;
      font-size: 6vw;
      line-height: 10vw;
      letter-spacing: 2vw;
      text-align: center;
    }
    .ac-2 {
      width: 44vw;
      height: 22vw;
    }
    .ac-2 h3 {
      margin: 2vw 2vw 2vw 2vw;
      letter-spacing: 2vw;
      font-size: 5vw;
    }
    .ac-2 p {
      margin: 2vw 2vw 2vw 2vw;
      letter-spacing: 1vw;
      font-size: 2.6vw;
      line-height: 5vw;
    }
    .ac-4 {
      width: 44vw;
      height: 47vw;
    }
    #con-b {
      width: 96vw;
      left: 1vw;
      top: 105vw;
    }
    .b-card {
      width: 45vw;
      height: 25vw;
      margin: 0 3vw 3vw 0;
      border-radius: 3vw;
    }
    .b-card h4 {
      font-size: 4vw;
    }
    .b-card p {
      font-size: 2.5vw;
    }
    #con-c {
      width: 24vw;
      left: 73vw;
    }
    #c-title {
      width: 12vw;
      height: 8vw;
      line-height: 8vw;
      text-align: center;
    }
    .c-1 {
      width: 10vw;
      height: 10vw;
      margin-left: 4vw;
    }
    .c-1 img { width: 100%;}

    /*easy*/
    .e-img img { width: 100%; margin-left: 0%;}
    /*footer*/
    #footer {
      width: 100vw;
      margin-top: 40vw;
    }
  }